<!DOCTYpE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head th:replace="_fragments :: head(~{::title})">
		<title>关于我</title>
	</head>
	<body>
		<!--导航-->
		<nav th:replace="_fragments :: menu(5)"></nav>
		
		<!--中间内容-->
		<div class="m-container m-padded-tb-big">
			<div class="ui container">
				<div class="ui stackable grid">
					<div class="eleven wide column">
						<img class="ui rounded image" th:src="#{about.img}" src="https://picsum.photos/id/1011/800/600"/>
					</div>
					<div class="five wide column">
						<div class="ui top attached segment">
							<div class="ui header m-color">关于我</div>
						</div>
						<div class="ui attached segment">
							<p class="m-text">朱海斌，一个IT小白，迷惘中~~~</p>
							
							<p class="m-text">热爱编程，热爱Guitar，Fight!!</p>
						</div>
						<div class="ui attached segment">
							<div class="ui teal basic left pointing label m-margin-tb-tiny">
								吉他
							</div>
							<div class="ui teal basic left pointing label m-margin-tb-tiny">
								阅读
							</div>
							<div class="ui teal basic left pointing label m-margin-tb-tiny">
								游戏
							</div>
							
						</div>
						<div class="ui attached segment">
							<div class="ui orange basic left pointing label m-margin-tb-tiny">
								Java
							</div>
							<div class="ui orange basic left pointing label m-margin-tb-tiny">
								分布式
							</div>
							<div class="ui orange basic left pointing label m-margin-tb-tiny">
								大数据
							</div>
						</div>
						<div class="ui bottom attached segment">
							<a href="#" class="ui github circular icon button"><i class="github icon"></i></a>
							<a href="#" class="ui wechat circular icon button"><i class="wechat icon"></i></a>
							<a href="#" class="ui qq circular icon button" data-content="QQ:695698666" data-position="bottom center"><i class="qq icon"></i></a>
						</div>
						
						<div class="ui wechatQR flowing popup transition hidden">
							<img th:src="@{/img/wechat.jpg}" class="ui rounded image" style="width: 100px;">
						</div>
					</div>
				</div>
			</div>
			
			
		</div>
		<br/>
		<br/>
		<br/>
		<!--底部-->
		<footer th:replace="_fragments :: footer" class="ui inverted vertical segment m-padded-tb-massive"></footer>
		<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
		<script>
			$('.menu.toggle').click(function(){
				$('.m-item').toggleClass('m-mobile-hide');
			});
			
			$('.qq').popup();
			
			$('.wechat').popup({
				popup : $('.wechatQR.popup'),
				on : 'hover',
				position: 'bottom center'
			});


		</script>


	</body>
</html>
